<!--
    @name 索赔申请
    @author haoyang.ding
    @date 2021-2-24
-->
<template>
  <section>
    <OneTableTemplate
      ref="multipleTable"
      :dynamic-components="formInputs"
      :dynamic-buttons="formButtons"
      :dynamic-api-config="dynamicApiConfigs"
      :dynamic-table-cols="tableHeader"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="true"
      :dynamic-table-defult-height="500"
    />
    <edit
      :key="editPopupsKey"
      :dynamic-edit-row-data="editRowData"
      :popups-visible="editPopupsVisible"
      :popups-state="editPopupsState"
      :dynamic-api-style="'restful'"
      @close="close"
    />
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/caseManagementQuery'
import { exportExcel } from '@/utils/getTimeString.js'
export default {
  name: 'ClaimAppeal',
  components: {
    OneTableTemplate,
    Edit: () => import('./edit')
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    return {
      dynamicApiConfigs: orgApis.claimAppeal,
      editRowData: {},
      editPopupsVisible: false,
      formInputs: [
        {
          compKey: 'key0',
          labelName: '申述日期：',
          codeField: 'createdDateStart,createdDateEnd',
          isMul: false,
          component: () => import('@/components/org/datePicker/andtDatePicker'),
          type: 'YYYY-MM-DD',
          format: 'yyyy-MM-dd',
          dateOptionsType: '0',
          isMust: true
        },
        {
          compKey: 'key1',
          labelName: '申述单号：',
          codeField: 'appealCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key2',
          labelName: '索赔单号：',
          codeField: 'claimCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key3',
          labelName: '状态：',
          codeField: 'appealStatus',
          lookuptype: 'VE0185',
          customObj: {
            api: orgApis.claimDeductSelect,
            defOptionFields: ['claimStatusCode', 'claimStatusName']
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true
        },
        {
          compKey: 'key4',
          labelName: '车牌号：',
          codeField: 'carLicense',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        },
        {
          compKey: 'key5',
          labelName: 'VIN码：',
          codeField: 'vin',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        },
        {
          compKey: 'key6',
          labelName: '车主姓名：',
          codeField: 'custName',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        },
        {
          compKey: 'key7',
          labelName: '车主电话：',
          codeField: 'phone',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        },
        {
          compKey: 'key8',
          labelName: '索赔分类：',
          codeField: 'claimTypeCode',
          lookuptype: 'VE0185',
          customObj: {
            api: orgApis.findClaimCategory,
            defOptionFields: ['claimCategoryCode', 'claimCategoryName']
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: false
        },
        {
          compKey: 'key9',
          labelName: '活动/同意编号：',
          codeField: 'actionCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        }
      ],
      formButtons: [
        {
          compKey: 'btnKey0',
          size: 'small',
          clickEvent: () => this.add(),
          text: this.$t('sys.button.add'),
          name: 'add', // 按钮图标样式
          position: 'left'
        },
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: '查询', // 查询
          name: 'search', // 按钮图标样式
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          name: 'export',
          clickEvent: () => this.export(),
          text: '导出', // 查询
          position: 'left'
        },
        {
          compKey: 'btnKey4',
          size: 'small',
          clickEvent: () => this.reset(),
          text: '重置',
          name: 'reset', // 按钮图标样式
          position: 'right'
        }
      ],
      tableHeader: [
        {
          prop: 'controlBtn',
          label: '操作',
          fixed: true,
          width: null,
          align: 'center',
          isComponent: true,
          comps: [
            {
              compKey: 'propKey0',
              align: 'center',
              labelName: '查看',
              codeField: 'editControlBtn',
              rowFileds: 'show:appealStatusName-待审核|通过|驳回',
              clickEvent: (index) => this.details(index),
              component: () => import('@/components/org/linkButton')
            },
            {
              compKey: 'propKey1',
              labelName: '审核',
              codeField: 'editControlBtn',
              rowFileds: 'show:appealStatusName-待提交',
              component: () => import('@/components/org/linkButton'),
              clickEvent: (index) => this.edit(index)
            }
          ]
        },
        {
          label: '申述单号',
          prop: 'appealCode'
        },
        {
          label: '申述日期',
          prop: 'createdDate'
        },
        {
          label: '索赔单号',
          prop: 'claimCode'
        },
        {
          label: '索赔分类',
          prop: 'claimType'
        },
        {
          label: '申述原因',
          prop: 'reason'
        },
        {
          label: '状态',
          prop: 'appealStatusName'
        },
        {
          label: '审核人',
          prop: 'auditUser'
        },
        {
          label: '审核时间',
          prop: 'auditDate'
        },
        {
          label: '审核意见',
          prop: 'auditMemo'
        }
      ],
      formField: {
        choice: '1',
        createdDateStart: '',
        createdDateEnd: '',
        appealCode: '',
        claimCode: '',
        appealStatus: '',
        carLicense: '',
        vin: '',
        reason: '',
        custName: '',
        phone: '',
        claimTypeCode: '',
        actionCode: ''
      }
    }
  },
  mounted() {
    this.queryTable(1)
  },
  methods: {
    export() {
      exportExcel(this.formField, orgApis.claimAppealExcel.APIUrl, orgApis.claimAppealExcel.ServiceCode, '索赔申请')
    },
    edit(index) {
      this.editPopupsState = 'edit'
      this.editPopupsVisible = true
      this.editRowData = this.$refs['multipleTable'].list[index]
    },
    details(index) {
      this.editPopupsState = 'view'
      this.editPopupsVisible = true
      this.editRowData = this.$refs['multipleTable'].list[index]
    },
    close() {
      this.editPopupsVisible = false
      this.queryTable(1)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
